<template>
  <div class="recoverfault">
    <div class="bluestripe">
      <div class="rect"></div>
      <div class="name">请求SD-SW</div>
    </div>
    <!-- ---content 交易信息 -->
    <div class="trademessage">
      <div class="title">交易信息</div>
      <el-divider></el-divider>

      <el-form ref="form" :model="form" label-width="155px" :disabled="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="交易流水号：" :required="true">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="请求报文类型：" :required="true">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银联单号：" :required="true">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银联二级单号：" :required="true">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="交易日期时间：" :required="true">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--催办信息-->
    <div class="messageset trademessage">
      <div class="title5 title">催办信息</div>
      <el-divider></el-divider>
      <div class="form4" style="margin-bottom: 20px">
        <el-form ref="form" :model="form" label-width="155px" :disabled="true">
          <el-row>
            <el-col :span="6">
              <el-form-item label="工作日志：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="期望完成处理时间：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计完成处理时间：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!--联系信息集合-->
    <div class="messageset trademessage">
      <div class="title5 title">联系信息集合</div>
      <el-divider></el-divider>
      <div class="form4" style="margin-bottom: 20px">
        <el-form ref="form" :model="form" label-width="155px" :disabled="true">
          <el-row>
            <el-col :span="6">
              <el-form-item label="联系人姓名：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 应答信息 -->
    <div class="attachment trademessage">
      <div class="title title3">应答信息</div>
      <el-divider></el-divider>
      <div class="file"></div>
    </div>

    <!---应答下的form  -->
    <div class="ressdsw">
      <el-form ref="form" :model="form" label-width="155px" :disabled="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="系统返回码：" :required="true">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统返回说明：" :required="true">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统返回时间：" :required="true">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- ---返回按钮 -->
    <div class="btnbox">
      <el-button type="primary" icon="el-icon-d-arrow-left" @click="back()"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
      },
    };
  },
  methods: {
    // 显示隐藏详情页
    back() {
      this.$eventBus.$emit("zipao");
    },
  },
};
</script>

<style lang='scss' scoped>
.bluestripe {
  background: #d6e4ff;
  height: 100%;
  width: 100%;
  padding: 8px 0 8px 0;
  display: flex;
  margin-bottom: 20px;
  .rect {
    background-color: #007aff;
    margin-right: 20px;
    height: 16px;
    width: 4px;
  }
  .name {
    font-size: 14px;
  }
}
.trademessage {
  height: 100%;
  width: 100%;
  .title {
    font-weight: 600;
    font-size: 16px;
  }
  .file {
    height: 70px;
    // background-color: pink;
    width: 100%;
  }
}
.btnbox {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>